<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户详情</title>
    <!-- 引入Bootstrap CSS -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
        }
        .user-detail {
            margin-top: 20px;
        }
        .user-detail p {
            margin: 10px 0;
        }
        .user-detail strong {
            font-weight: bold;
        }
        .actions {
            margin-top: 20px;
        }
        .actions button {
            margin-right: 10px;
        }
        .modal {
            display: none; /* 默认隐藏 */
            position: fixed; /* 固定位置 */
            z-index: 1; /* 确保在最上层 */
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgb(0,0,0); /* 背景色 */
            background-color: rgba(0,0,0,0.4); /* 带透明度的背景色 */
        }
        .modal-content {
            background-color: #fefefe;
            margin: 15% auto; /* 垂直居中 */
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 600px;
        }
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="container">
        <h1 class="mt-5">用户详情</h1>
        <div class="user-detail mt-4">
            <p><strong>ID:</strong> {{ user.id }}</p>
            <p><strong>姓名:</strong> {{ user.name }}</p>
            <p><strong>身份证号码:</strong> {{ user.identity_card }}</p>
            <p><strong>住院号:</strong> {{ user.admission_no }}</p>
            <p><strong>性别:</strong> {{ user.gender }}</p>
            <p><strong>年龄:</strong> {{ user.age }}</p>
            <p><strong>生育史:</strong> {{ user.fertility_history }}</p>
            <p><strong>教育程度:</strong> {{ user.education_level }}</p>
            <p><strong>职业:</strong> {{ user.occupation }}</p>
            <p><strong>诊断:</strong> {{ user.diagnosis }}</p>
            <p><strong>合并疾病:</strong> {{ user.comorbidity }}</p>
            <p><strong>治疗方式:</strong> {{ user.therapeutic_modality }}</p>
            <p><strong>医疗费用承担方式:</strong> {{ user.methods_of_medical_cost_coverage }}</p>
            <p><strong>婚姻状况:</strong> {{ user.marital_status }}</p>
            <p><strong>电话:</strong> {{ user.phone }}</p>
            <p><strong>紧急联系人:</strong> {{ user.emergency_contact }}</p>
            <p><strong>紧急联系人电话:</strong> {{ user.emergency_contact_phone }}</p>
            <p><strong>家庭住址:</strong> {{ user.address }}</p>
            <p><strong>农业户口:</strong> {{ user.agricultural_indicator }}</p>
            <p><strong>体温:</strong> {{ user.temperature }}</p>
            <p><strong>脉搏:</strong> {{ user.pulse }}</p>
            <p><strong>呼吸频率:</strong> {{ user.respiration_rate }}</p>
            <p><strong>血压:</strong> {{ user.blood_pressure }}</p>
            <p><strong>创建时间:</strong> {{ user.create_time }}</p>
            <p><strong>更新时间:</strong> {{ user.update_time }}</p>
        </div>
        <div class="actions mt-4">
            <button class="btn btn-primary" onclick="openUpdateModal({{ user.id }})">更新用户</button>
            <button class="btn btn-info" onclick="openPsychologicalModal({{ user.id }})">查看心理量表得分</button>
        </div>
    </div>

    <!-- 更新用户模态框 -->
    <div id="updateModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeUpdateModal()">&times;</span>
            <h2 class="mb-4">更新用户</h2>
            <form id="updateUserForm">
                <input type="hidden" id="updateUserId" value="{{ user.id }}">
                <div class="form-group">
                    <label for="updateName">姓名:</label>
                    <input type="text" class="form-control" id="updateName" name="name" value="{{ user.name }}" required>
                </div>
                <div class="form-group">
                    <label for="updateIdentityCard">身份证号:</label>
                    <input type="text" class="form-control" id="updateIdentityCard" name="identity_card" value="{{ user.identity_card }}" required>
                </div>
                <div class="form-group">
                    <label for="updateAdmissionNo">住院号:</label>
                    <input type="text" class="form-control" id="updateAdmissionNo" name="admission_no" value="{{ user.admission_no }}" required>
                </div>
                <div class="form-group">
                    <label for="updateGender">性别:</label>
                    <select class="form-control" id="updateGender" name="gender" required>
                        <option value="Male" {% if user.gender == 'Male' %}selected{% endif %}>男</option>
                        <option value="Female" {% if user.gender == 'Female' %}selected{% endif %}>女</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="updateAge">年龄:</label>
                    <input type="number" class="form-control" id="updateAge" name="age" value="{{ user.age }}" required>
                </div>
                <div class="form-group">
                    <label for="updateFertilityHistory">生育史:</label>
                    <input type="text" class="form-control" id="updateFertilityHistory" name="fertility_history" value="{{ user.fertility_history }}" required>
                </div>
                <div class="form-group">
                    <label for="updateEducationLevel">教育水平:</label>
                    <select class="form-control" id="updateEducationLevel" name="education_level" required>
                        <option value="Primary" {% if user.education_level == 'Primary' %}selected{% endif %}>小学</option>
                        <option value="Secondary" {% if user.education_level == 'Secondary' %}selected{% endif %}>中学</option>
                        <option value="Higher" {% if user.education_level == 'Higher' %}selected{% endif %}>大学及以上</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="updateOccupation">职业:</label>
                    <input type="text" class="form-control" id="updateOccupation" name="occupation" value="{{ user.occupation }}" required>
                </div>
                <div class="form-group">
                    <label for="updateDiagnosis">诊断:</label>
                    <input type="text" class="form-control" id="updateDiagnosis" name="diagnosis" value="{{ user.diagnosis }}" required>
                </div>
                <div class="form-group">
                    <label for="updateComorbidity">合并症:</label>
                    <input type="text" class="form-control" id="updateComorbidity" name="comorbidity" value="{{ user.comorbidity }}" required>
                </div>
                <div class="form-group">
                    <label for="updateTherapeuticModality">治疗方式:</label>
                    <input type="text" class="form-control" id="updateTherapeuticModality" name="therapeutic_modality" value="{{ user.therapeutic_modality }}" required>
                </div>
                <div class="form-group">
                    <label for="methods_of_medical_cost_coverage">医疗费用承担方式:</label>
                    <input type="text" class="form-control" id="methods_of_medical_cost_coverage" name="methods_of_medical_cost_coverage" value="{{ user.methods_of_medical_cost_coverage }}" required>
                </div>
                <div class="form-group">
                    <label for="updateMaritalStatus">婚姻状况:</label>
                    <select class="form-control" id="updateMaritalStatus" name="marital_status" required>
                        <option value="Single" {% if user.marital_status == 'Single' %}selected{% endif %}>单身</option>
                        <option value="Married" {% if user.marital_status == 'Married' %}selected{% endif %}>已婚</option>
                        <option value="Divorced" {% if user.marital_status == 'Divorced' %}selected{% endif %}>离异</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="updatePhone">电话:</label>
                    <input type="text" class="form-control" id="updatePhone" name="phone" value="{{ user.phone }}" required>
                </div>
                <div class="form-group">
                    <label for="updateEmergencyContact">紧急联系人:</label>
                    <input type="text" class="form-control" id="updateEmergencyContact" name="emergency_contact" value="{{ user.emergency_contact }}" required>
                </div>
                <div class="form-group">
                    <label for="updateEmergencyContactPhone">紧急联系人电话:</label>
                    <input type="text" class="form-control" id="updateEmergencyContactPhone" name="emergency_contact_phone" value="{{ user.emergency_contact_phone }}" required>
                </div>
                <div class="form-group">
                    <label for="updateAddress">地址:</label>
                    <input type="text" class="form-control" id="updateAddress" name="address" value="{{ user.address }}" required>
                </div>
                <div class="form-group">
                    <label for="updateAgriculturalIndicator">农村户口:</label>
                    <select class="form-control" id="updateAgriculturalIndicator" name="agricultural_indicator" required>
                        <option value="True" {% if user.agricultural_indicator %}selected{% endif %}>是</option>
                        <option value="False" {% if not user.agricultural_indicator %}selected{% endif %}>否</option>
                    </select>
                </div>
                <!-- 新增字段 -->
                <div class="form-group">
                    <label for="temperature">体温:</label>
                    <input type="text" class="form-control" id="temperature" name="temperature">
                </div>
                <div class="form-group">
                    <label for="pulse">心率:</label>
                    <input type="text" class="form-control" id="pulse" name="pulse">
                </div>
                <div class="form-group">
                    <label for="respiration_rate">呼吸频率:</label>
                    <input type="text" class="form-control" id="respiration_rate" name="respiration_rate">
                </div>
                <div class="form-group">
                    <label for="blood_pressure">血压:</label>
                    <input type="text" class="form-control" id="blood_pressure" name="blood_pressure">
                </div>
                <button type="button" class="btn btn-primary" onclick="submitUpdateForm()">提交</button>
            </form>
        </div>
    </div>

    <!-- 心理量表得分模态框 -->
    <div id="psychologicalModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closePsychologicalModal()">&times;</span>
            <h2 class="mb-4">心理量表得分</h2>
            <div id="psychologicalScores">
                {% for record in psychological_records %}
                    <p><strong>应激感受量表评分(PSS-10):</strong> {{ record[2] }}</p>
                    <p><strong>广泛性焦虑量表评分(GAD-7):</strong> {{ record[3] }}</p>
                    <p><strong>宾州担忧问卷评分(PSWQ):</strong> {{ record[4] }}</p>
                    <p><strong>患者健康问卷抑郁量表评分(PHQ-9):</strong> {{ record[5] }}</p>
                    <p><strong>反刍思维量表评分(RRS):</strong> {{ record[6] }}</p>
                    <p><strong>前瞻回溯记忆问卷评分(PRMQ):</strong> {{ record[7] }}</p>
                    <p><strong>生命质量核心量表评分(QLQ-C30):</strong> {{ record[8] }}</p>
                    <p><strong>匹兹堡睡眠质量指数评分(PSQI):</strong> {{ record[9] }}</p>
                    <hr>
                {% endfor %}
            </div>
        </div>
    </div>

    <script>
        function openUpdateModal(userId) {
            // 显示模态框
            document.getElementById('updateModal').style.display = 'block';
        }

        function closeUpdateModal() {
            // 隐藏模态框
            document.getElementById('updateModal').style.display = 'none';
        }

        function submitUpdateForm() {
            // 获取表单数据
            var formData = {
                name: document.getElementById('updateName').value,
                identity_card: document.getElementById('updateIdentityCard').value,
                admission_no: document.getElementById('updateAdmissionNo').value,
                gender: document.getElementById('updateGender').value,
                age: document.getElementById('updateAge').value,
                fertility_history: document.getElementById('updateFertilityHistory').value,
                education_level: document.getElementById('updateEducationLevel').value,
                occupation: document.getElementById('updateOccupation').value,
                diagnosis: document.getElementById('updateDiagnosis').value,
                comorbidity: document.getElementById('updateComorbidity').value,
                therapeutic_modality: document.getElementById('updateTherapeuticModality').value,
                methods_of_medical_cost_coverage: document.getElementById('methods_of_medical_cost_coverage').value,
                marital_status: document.getElementById('updateMaritalStatus').value,
                phone: document.getElementById('updatePhone').value,
                emergency_contact: document.getElementById('updateEmergencyContact').value,
                emergency_contact_phone: document.getElementById('updateEmergencyContactPhone').value,
                address: document.getElementById('updateAddress').value,
                agricultural_indicator: document.getElementById('updateAgriculturalIndicator').value === 'True',
                // 新增字段
                temperature: document.getElementById('temperature').value,
                pulse: document.getElementById('pulse').value,
                respiration_rate: document.getElementById('respiration_rate').value,
                blood_pressure: document.getElementById('blood_pressure').value
            };

            var userId = document.getElementById('updateUserId').value;

            // 发送数据到服务器
            fetch(`/user/users/${userId}`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(formData)
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('用户更新成功');
                    closeUpdateModal(); // 关闭模态框
                    window.location.reload(); // 刷新页面
                } else {
                    alert('用户更新失败');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('请求失败，请稍后重试');
            });
        }

        function openPsychologicalModal(userId) {
            // 显示模态框
            document.getElementById('psychologicalModal').style.display = 'block';
        }

        function closePsychologicalModal() {
            // 隐藏模态框
            document.getElementById('psychologicalModal').style.display = 'none';
        }

        // 点击模态框外部区域关闭模态框
        window.onclick = function(event) {
            var modal = document.getElementById('updateModal');
            if (event.target == modal) {
                modal.style.display = 'none';
            }
        }
    </script>

    <!-- 引入Bootstrap JS和依赖 -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>